<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-table
        :data="rightsList.slice((currentPage-1)*PageSize,currentPage*PageSize)"
        border
        stripe
      >
        <el-table-column
          type="index"
        />
        <el-table-column
          label="权限"
          prop="authName"
        />
        <el-table-column
          label="路径"
          prop="path"
        />
        <el-table-column
          label="权限等级"
          prop="level"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.level === '0'">
              一级
            </el-tag>
            <el-tag
              v-else-if="scope.row.level === '1'"
              type="success"
            >
              二级
            </el-tag>
            <el-tag
              v-else
              type="warning"
            >
              三级
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [5, 10, 15, 20],
      // 默认每页显示的条数（可修改）
      PageSize: 10,
      // 权限列表
      rightsList: []
    }
  },
  created () {
    this.getRightList()
  },
  methods: {
    async getRightList () {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) return this.$message.error('获取权限列表失败！')
      this.rightsList = res.data
      this.totalCount = res.data.length
      console.log(this.rightsList)
      console.log(this.totalCount)
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      this.currentPage = val
    }
  }
}
</script>
<style lang="less" scoped>

</style>
